<template>
    <section>
        <el-form :model="detail" label-width="120px" ref="detail" style="margin-top:20px;">
            <el-form-item label="任务状态：" style="color: #20a0ff;">
                {{detali_status(obtainStatus)}}
            </el-form-item>
            <el-form-item label="执行方昵称：">
                {{detail.obtainNick}}
            </el-form-item>
            <el-form-item label="执行方手机号：">
                {{detail.obtainAccount}}
            </el-form-item>
            <el-form-item label="执行方邮箱：">
                {{detail.obtainEmail}}
            </el-form-item>

            <el-form-item label="任务名称：">
                {{detail.name}}
            </el-form-item>
            <el-form-item label="任务类型：">
                {{detail.type}}
            </el-form-item>
            <el-form-item label="截止日期：">
                {{detail.closeDate}} {{detail.closeTime}}
            </el-form-item>
            <el-form-item label="任务定价：">
                {{detail.reward}}
            </el-form-item>
            <el-form-item label="任务需求：">
                {{detail.instruction}}
            </el-form-item>
            <el-form-item label="任务配图：">
                <img :src="detail.cover" height="100" width="100" style="vertical-align: middle;margin: 5px 0;" />
            </el-form-item>
            <el-form-item label="字数要求：">
                {{detail.numberRequirement}}
            </el-form-item>
            <el-form-item label="提交须知：">
                {{detail.notes}}
            </el-form-item>
        </el-form>

        <el-form :model="awardDetail" label-width="120px" v-if="obtainStatus >= 8">
            <el-form-item label="任务ID：">
                {{awardDetail.taskId}}
            </el-form-item>
            <el-form-item label="任务奖励：">
                {{awardDetail.taskReward}}
            </el-form-item>
            <el-form-item label="学生奖励：">
                {{awardDetail.studentAward}}
            </el-form-item>
            <el-form-item label="保证金：">
                {{awardDetail.deposit}} 
            </el-form-item>
            <el-form-item label="已退保证金：">
                {{awardDetail.leftDeposit}}
            </el-form-item>
            <el-form-item label="用户手机号：">
                {{awardDetail.selfAccount}}
            </el-form-item>
            <el-form-item label="邀请人手机号：">
                {{awardDetail.inviteAccount}}
            </el-form-item>
            <el-form-item label="历次邀请奖励：">
                 <el-table :data="awardDetail.inviteRewardList" highlight-current-row v-loading="listLoading"  style="width: 50%;margin-top: 20px;">
                    <el-table-column type="index" width="60">
                    </el-table-column>
                    <el-table-column prop="taskId" label="任务ID" width="80" >
                    </el-table-column>
                    <el-table-column prop="orderAmount" label="奖励金额" width="150" >
                    </el-table-column> 
                </el-table>
            </el-form-item> 
        </el-form>

        <div slot="footer" class="dialog-footer" v-else>

        </div>
    </section>
</template>

<script>
    import util from '../../common/js/util'
    //import NProgress from 'nprogress'
    import { getTaskObtainDetail  ,getObtainAwardDetail} from '../../api/api';
    import moment from 'moment'

    export default {
        data() {
            return {
                id: '',
                detail: {},
                awardDetail:{},
                applyDetail: {},
                listLoading: false,
                
                obtainStatus: '',//0领取（未提交），1已提交，2后台提交给委托方，3申请延期，4延期开发中，5被退回修改中，6申请取消，7已取消，8审核通过，9已打款
                instruction: '',
                instruction1: '',
            }
        },
        methods: {
            task_status: function (value) {
                console.log(value)
                if(value == 1){
                    return '进行中';
                }else if(value == 2){
                    return '已完结';
                }
                else{
                    return '';
                }
            },
            detali_status: function (value) {
                if(value == 0){
                    return '未提交';
                }else if(value == 1){
                    return '已提交 未审核';
                }else if(value == 2){
                    return '后台提交给委托方';
                }else if(value == 3){
                    return '超时 申请延期';
                }else if(value == 4){
                    return '延期开发中';
                }else if(value == 5){
                    return '被退回修改中';
                }else if(value == 6){
                    return '委托方 申请取消';
                }else if(value == 7){
                    return '已取消';
                }else if(value == 8){
                    return '审核通过';
                }else if(value == 9){
                    return '已打款';
                }else{
                    return '';
                }
            },
            //获取详情
            getDetail() {
                let para = {
                    obtainId: this.$route.query.id
                };
                this.listLoading = true;
                getTaskObtainDetail(para).then((res) => {
                    this.detail = res.data.out_data;
                    var _obtainStatus = res.data.out_data.obtainStatus;
                    this.obtainStatus = _obtainStatus;
                    //this.obtainStatus = 3;

                    this.listLoading = false;
                    console.log(this.obtainStatus);
                    if(this.obtainStatus == 9){
                        this.getAwardDetail(); 
                    }
                    else{
                        console.log('非正常结束');
                    }
                });
            },
            getAwardDetail(){
                let paratemp = {
                    obtainId: this.$route.query.id
                };
                this.listLoading = true;
                getObtainAwardDetail(paratemp).then((res) => {
                    this.awardDetail = res.data.out_data;
                    // var _obtainStatus = res.data.out_data.obtainStatus;
                    // this.obtainStatus = _obtainStatus;
                    this.listLoading = false;
                });
            },
            
        },
        mounted() {
            this.getDetail();
        }
    }

</script>

<style scoped>

</style>